<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { onMounted, ref, watch } from 'vue'
  import routeComponentName from '@/config/route-component-name'
  import { useGetDetectList } from '@/services/pages/return-factory/useReturnFactory'
  import { ElTable, ElTableColumn, ElInput } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'

  const { list, total, getListParam, getListLoading, getList } = useGetDetectList()

  defineOptions({
    name: routeComponentName.returnFactory.detectList,
  })

  // 激活路由对象
  const route = useRoute()

  // 全局路由对象
  const router = useRouter()

  // 分页组件实例
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  /**
   * 获取列表
   */
  const _getList = () => {
    if (paginationInstance.value) {
      getListParam.value.limit = paginationInstance.value.size
      getListParam.value.page = paginationInstance.value.current
      getList()
    }
  }

  /**
   * 重置
   */
  const onClear = () => {
    getListParam.value = {
      limit: 50,
      page: 1,
      userSearch: '',
      repairCheckNo: '',
    }
    _getList()
  }

  /**
   * 跳转到检测单详情
   */
  const toDetail = (id: string) => {
    router.push(`/return/factory/detect/detail/${id}`)
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'detectList' && route.query.isUpdate === '1') {
        _getList()
      }
    },
    { immediate: true },
  )

  onMounted(() => {
    _getList()
  })
</script>

<template>
  <div v-loading="getListLoading" class="detect-list-wrapper">
    <div class="detect-list">
      <div class="header">
        <div class="btn-group">
          <!-- <router-link to="/return/factory/detect/create">
            <h-plain-button>创建检测单</h-plain-button>
          </router-link> -->
        </div>
        <div class="search">
          <el-input
            v-model.trim="getListParam.repairCheckNo"
            clearable
            placeholder="返厂检测单号"
            class="return-factory-detect-no"
            @keyup.enter="_getList"
            @clear="_getList"
          />
          <el-input
            v-model.trim="getListParam.userSearch"
            clearable
            placeholder="公司姓名/公司手机号"
            class="customer-keyword"
            @keyup.enter="_getList"
            @clear="_getList"
          />
          <h-button type="primary" @click="_getList">
            <i class="iconfont icon-Search" style="font-size: 12px"></i>
            搜索
          </h-button>
          <h-button @click="onClear">
            <i class="iconfont icon-reset" style="font-size: 14px"></i>
            重置
          </h-button>
        </div>
      </div>
      <div class="table">
        <el-table :border="true" :data="list" height="100%" stripe>
          <!-- 序号 -->
          <el-table-column type="index" label="序号" fixed="left" :align="'center'" width="50" />

          <!-- 检测单号 -->
          <el-table-column prop="repairCheckNo" label="检测单号" width="120" show-overflow-tooltip>
            <template #default="{ row }">
              <h-link @click="toDetail(row.id)">{{ row.repairCheckNo }}</h-link>
            </template>
          </el-table-column>

          <!-- 返厂单号 -->
          <el-table-column prop="repairNo" label="返厂单号" width="120" show-overflow-tooltip />

          <!-- 公司姓名 -->
          <el-table-column prop="username" label="公司姓名" width="100" show-overflow-tooltip />

          <!-- 手机号 -->
          <el-table-column prop="phone" label="手机号" width="120" />

          <!-- 检测数量 -->
          <el-table-column prop="qty" label="检测数量" width="100" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.qty.join('、') }}
            </template>
          </el-table-column>

          <!-- 序列号 -->
          <el-table-column prop="snCode" label="序列号" width="140" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.snCodes.filter((item) => !!item).join('、') }}
            </template>
          </el-table-column>

          <!-- 设备编号 -->
          <el-table-column prop="goodsCode" label="设备编号" width="100" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.goodsCode.filter((item) => !!item).join('、') }}
            </template>
          </el-table-column>

          <!-- 设备名称 -->
          <el-table-column prop="goodsName" label="设备名称" width="120" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.goodsName.join('、') }}
            </template>
          </el-table-column>

          <!-- 设备规格 -->
          <el-table-column prop="goodsSpec" label="设备规格" width="100" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.goodsSpecName.join('、') }}
            </template>
          </el-table-column>

          <!-- 创建时间 -->
          <el-table-column prop="createTime" label="创建时间" width="140" />

          <!-- 更新时间 -->
          <el-table-column prop="updateTime" label="更新时间" width="140" />

          <!-- 状态 -->
          <el-table-column prop="status" label="状态" fixed="right" :align="'center'" width="100">
            <template #default="{ row }">
              <div class="flex_justify_center">
                <h-status v-if="row.status === 0" type="warning">待检测</h-status>
                <h-status v-else-if="row.status === 1" type="primary">检测中</h-status>
                <h-status v-else-if="row.status === 2" type="success">检测完成</h-status>
                <h-status v-else type="info">已取消</h-status>
              </div>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column prop="operate" label="操作" fixed="right" width="70">
            <template #default="{ row }">
              <h-link @click="toDetail(row.id)">详情</h-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <Pagination
          ref="paginationInstance"
          :list_total="total"
          @size-change="_getList"
          @current-change="_getList"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .detect-list-wrapper {
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .detect-list {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .header {
        display: flex;
        justify-content: space-between;

        .search {
          display: flex;
          column-gap: 5px;

          .return-factory-detect-no,
          .customer-keyword {
            width: 160px;
          }
        }
      }

      .table {
        max-height: calc(100% - 80px);
      }

      .pagination {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>
